<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>智慧校园</title>
    <link rel="stylesheet" href="css/index.css">

    <script src="./Build/Cesium.js"> </script>

    <link rel="stylesheet" type="text/css"
        href="./Build/Widgets/widgets.css" />
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .right-bottom .buts {
            padding: 0 10px;
        }
        .right-bottom .buts div {
            padding: 10px 0;
        }
        .infos {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 0 10px;
        }
        .infos input:not(:first-of-type) {
            margin-left: 5px;
        }
        .myContent {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .myContent input:not(:first-of-type) {
            margin-left: 5px;
        }
        .school_il {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .school_il a {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="content-body">
        <div class="header">
            <div class="header-left">
                <span>南通大学CIM基础平台</span>
            </div>
            <div class="header-time">
                <span id="time"></span>
            </div>
        </div>

        <div class="content">
            <div class="content-con">
                <div class="left-body">
                    <div class="left-top public-bg">
                        <div class="public-title">校园概况</div>
                        <div class="top-body">
                            <div class="top-left">
                                <div class="top-left-title">
                                    <h6>校区面积</h6>
                                    <span><b>1756</b>m2</span>
                                    <img src="image/pictre.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
                                </div>

                            </div>
                            <div class="top-right">
                                <div class="top-left-title">
                                    <h6>在校师生</h6>
                                    <span><b>3520</b></span>
                                    <img src="image/pictre.png" alt="更多资源：https://gitee.com/iGaoWei/big-data-view">
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="left-con public-bg">
                        <div class="public-title">校园建筑分布</div>
                        <div class="title-nav">
                            <div class="top5-ul">
                                <ul>
                                    <li>
                                        <span>1</span>
                                        <span>教学</span>
                                        <span>教学楼1</span>
                                        <span>教学楼1</span>
                                        <span>纺化楼1</span>
                                    </li>
                                    <li>
                                        <span>2</span>
                                        <span>住宿</span>
                                        <span>学生宿舍</span>
                                        <span>青教公寓</span>
                                    </li>
                                    <li>
                                        <span>3</span>
                                        <span>学习</span>
                                        <span>图书馆</span>
                                    </li>
                                    <li>
                                        <span>4</span>
                                        <span>生活</span>
                                        <span>超市</span>
                                        <span>体育馆</span>
                                    </li>
                                    <li>
                                        <span>5</span>
                                        <span>ATM</span>
                                        <span>建行</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- <div class="public-title">图层信息</div>
                        <div class="myContent" id="leida">
                            <input type="checkbox" value="apple" id="tianditu">天地图</input>
                            <input type="checkbox" value="wms" id="wmscustom">自定义WMS地图</input>
                            <input type="checkbox" value="3d tiles" id="tiles3d">校园实景模型</input>
                        </div> -->
                    </div>
                    <div class="left-bottom public-bg">
                        <!-- <div class="public-title">校园风光</div> -->
                        <!-- <div class="top5-ul school_il" id="wuran" style="padding: 0 10px;">
                            <input type="button" id="video" value="视频监控" />
                            <a href="https://www.ntu.edu.cn/" target="_blank">校园主页</a>
                        </div> -->
                        <div class="public-title">信息查询</div>
                        <div class="top5-ul school_il" id="wuran" style="padding: 0 10px;">
                            <input type="button" id="video" value="视频监控" />
                            <a href="https://www.ntu.edu.cn/" target="_blank">校园主页</a>
                        </div>
                        <div class="infos">
                            <input type="button" id="identify" value="多边形查询" />
                            <input type="button" id="clearSelection" value="清除结果" />
                            <input type="button" id="floorAndRoom" value="分层分户信息" />
                        </div>
                        <div class="buts" style="padding: 0 10px;">
                            <div class="myContent" id="leida">
                                <input type="checkbox" value="apple" id="tianditu">天地图</input>
                                <input type="checkbox" value="wms" id="wmscustom">自定义WMS地图</input>
                                <input type="checkbox" value="3d tiles" id="tiles3d">校园实景模型</input>
                            </div>
                            <div>
                                <input type="button" id="coordinate" value="坐标量算" />
                                <input type="button" id="distance" value="距离量算" />
                                <input type="button" id="area" value="面积量算" />
                                <input type="button" id="clearMersure" value="清除" />
                            </div>
                            <div>
                                <input type="button" id="Viewshed" value="视域分析" />
                                <input type="button" id="ViewshedClear" value="清除" />
                            </div>
                            <div>
                                <input type="button" id="Heatmap" value="热力图" />
                            </div>
                            <div>
                                <button id="HnflectionPoint">新增拐点</button>
                                <button id="ClearflectionPoint">清除拐点</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="center-body">
                    <div id="cesiumContainer"></div>
                    <div id="infowindow" style="
                    position:absolute;
                    top:10px;
                    right:10px;
                    z-index:999;
                    background:rgb(18, 100, 138);
                    width:200px;height:50px;
                    font-size:13px;display:none;
                    line-height:25px;">
                    </div>
                </div>

                <!-- <div class="right-body">
                    <div class="right-top public-bg">
                        <div class="public-title">校园建筑分布</div>
                        <div class="title-nav">
                            <div class="top5-ul">
                                <ul>
                                    <li>
                                        <span>1</span>
                                        <span>教学</span>
                                        <span>教学楼1</span>
                                        <span>教学楼1</span>
                                        <span>纺化楼1</span>
                                    </li>
                                    <li>
                                        <span>2</span>
                                        <span>住宿</span>
                                        <span>学生宿舍</span>
                                        <span>青教公寓</span>
                                    </li>
                                    <li>
                                        <span>3</span>
                                        <span>学习</span>
                                        <span>图书馆</span>
                                    </li>
                                    <li>
                                        <span>4</span>
                                        <span>生活</span>
                                        <span>超市</span>
                                        <span>体育馆</span>
                                    </li>
                                    <li>
                                        <span>5</span>
                                        <span>ATM</span>
                                        <span>建行</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="right-con public-bg">
                        <div class="public-title">信息查询</div>
                        <div class="infos">
                            <input type="button" id="identify" value="多边形查询" />
                            <input type="button" id="clearSelection" value="清除结果" />
                            <input type="button" id="floorAndRoom" value="分层分户信息" />
                        </div>
                    </div>
                    <div class="right-bottom public-bg">
                        <div class="public-title">空间分析</div>
                        <div class="buts">
                            <div>
                                <input type="button" id="coordinate" value="坐标量算" />
                                <input type="button" id="distance" value="距离量算" />
                                <input type="button" id="area" value="面积量算" />
                                <input type="button" id="clearMersure" value="清除" />
                            </div>
                            <div>
                                <input type="button" id="Viewshed" value="视域分析" />
                                <input type="button" id="ViewshedClear" value="清除" />
                            </div>
                            <div>
                                <input type="button" id="Heatmap" value="热力图" />
                            </div>
                            <div>
                                <button id="HnflectionPoint">新增拐点</button>
                                <button id="ClearflectionPoint">清除拐点</button>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- 点位 绘制 -->
<script src="./CesiumTools/EntityDraw/index.js"></script>
<script src="./js/turf.min.js"></script>
<script>
    var handler = null;
    var drawingMode = "undefined";
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkNGNmNzRjYy0xNmZkLTQxNDEtYjQxMy0yMWI4NWE5ZWQwN2IiLCJpZCI6NTM1ODEsImlhdCI6MTYxOTI1NzU5MH0.Xcl8pPPUlgWmdip2hj90xyCoRz_Ikj7zCW1PgJhK2n8';
    var viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        // homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        scene3DOnly: true,
        navigationHelpButton: false,
        vrButton: false,
        shouldAnimate: true,
        orderIndependentTranslucency: false,
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            //影像底图
            url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ec5a2a0e05d6e7be9aabdcfa8a8812a9",
            subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            layer: "tdtImgLayer",
            style: "default",
            format: "image/jpeg",
            maximumLevel: 18,
            tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
            show: true
        })
        // terrainProvider: Cesium.createWorldTerrain()
    });
    viewer._cesiumWidget._creditContainer.style.display = "none";
    viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(120.16, 32.71, 11500000.0) });
    viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (commandInfo) {
        //飞到瓦片区域
        viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(120.16, 32.71, 500000.0) });
        //viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(120.0, 40.0),new Cesium.Cartesian3(0.0,-10000.0, 3930000.0));
        //viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        commandInfo.cancel = true;
    });
    // 开启地形深度监测
    viewer.scene.globe.depthTestAgainstTerrain = true;
        // 重置鼠标动作
    function initDefaultMouse() {
        viewer.scene.screenSpaceCameraController.tiltEventTypes = [
            Cesium.CameraEventType.MIDDLE_DRAG,
            Cesium.CameraEventType.RIGHT_DRAG,
            Cesium.CameraEventType.PINCH,
            {
                eventType: Cesium.CameraEventType.LEFT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            }
        ];
        // 平移 添加鼠标右键  鼠标右键平移
        viewer.scene.screenSpaceCameraController.rotateEventTypes = [
            Cesium.CameraEventType.LEFT_DRAG
        ];
        viewer.scene.screenSpaceCameraController.zoomEventTypes = [
            Cesium.CameraEventType.WHEEL,
            Cesium.CameraEventType.PINCH
        ];
    }
    initDefaultMouse()
</script>
<script>
    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '年' + fillZero(myMonth) + '月' + fillZero(myToday) + '日' + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }
    //大屏
    setInterval(getTime, 1000);
</script>
<script src="./js/axToolCoordinate.js"></script>
<script src="./js/axToolDistance.js"></script>
<script src="./js/axToolIdentity.js"></script>
<script src="./js/axToolFloorAndRoom.js"></script>
<script src="./js/axToolArea.js"></script>
<script src="./js/axVideoMonitor.js"></script>
<video id="myVideo" muted="true" autoplay="true" loop="true" style="display:none">
    <source src="./vedio/big-buck-bunny_trailer.mp4" type="video/mp4">
    <script src="./js/axToolViewshed.js"></script>
    <script src="./js/axToolAddHeatMap.js"></script>
    <script>
        var imageryLayer;
        var draw;
        var drawPoints = [] // 绘制的点位
        var drawOriginPoints = [] // 绘制的笛卡尔坐标
        function switchLayer(layer) {
            if (mapswitch.checked === true) {
                var imageryProvider = new Cesium.WebMapServiceImageryProvider({
                    url: 'http://127.0.0.1:8180/geoserver/osm_ws/wms?',
                    layers: 'osm_ws:osm_china', // WMS图层名称NtuWrokspace:省界_region
                    parameters: {
                        transparent: true, // 设置为透明背景
                        format: "image/png",
                        srs: "EPSG:4326",
                        minimumLevel: 0,
                        maximumLevel: 18,

                    }
                });
                // 创建一个ImageryLayer实例，将ImageryProvider添加到场景中
                imageryLayer = new Cesium.ImageryLayer(imageryProvider);
                viewer.imageryLayers.add(imageryLayer);
            }
            else {
                viewer.imageryLayers.remove(imageryLayer);
            }
        }
        const mapswitch = document.getElementById('wmscustom');
        mapswitch.onclick = switchLayer;
        var imageryLayer2;
        function switchLayer2(layer) {
            if (tianditu_.checked === true) {
                var imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                    url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=ec5a2a0e05d6e7be9aabdcfa8a8812a9",
                    layer: "vec",
                    style: "default",
                    tileMatrixSetID: "w",
                    format: "tiles",
                    maximumLevel: 18,
                })
                // 创建一个ImageryLayer实例，将ImageryProvider添加到场景中
                imageryLayer2 = new Cesium.ImageryLayer(imageryProvider);
                viewer.imageryLayers.add(imageryLayer2);
            }
            else {
                viewer.imageryLayers.remove(imageryLayer2);
            }
        }
        handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        // 拾取经纬度坐标点
        handler.setInputAction(function (movement) {
            let snPosition = viewer.scene.globe.pick(viewer.camera.getPickRay(movement.position), viewer.scene);
            let cartographic = Cesium.Cartographic.fromCartesian(snPosition); //根据笛卡尔坐标获取到弧度
            let lng = Cesium.Math.toDegrees(cartographic.longitude); //根据弧度获取到经度
            let lat = Cesium.Math.toDegrees(cartographic.latitude); //根据弧度获取到纬度
            console.log({ lng, lat });
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        const tianditu_ = document.getElementById('tianditu');
        tianditu_.onclick = switchLayer2;
        var tileset;
        function switchLayer3(layer) {
            if (threedtiles.checked === true) {
                tileset = new Cesium.Cesium3DTileset({
                    url: "./ThreeDTilesZhongxiu/tileset.json",
                    maximumScreenSpaceError: 32,
                    skipLevelOfDetail: true,
                    immediatelyLoadDesiredLevelOfDetail: true
                });
                viewer.scene.primitives.add(tileset);
                //单体信息，楼层信息
                tilesetClassify = new Cesium.Cesium3DTileset({
                    url: "./buildings/tileset.json",
                    classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
                    modelMatrix: Cesium.Matrix4.fromArray([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]),
                });
                tilesetClassify.style = new Cesium.Cesium3DTileStyle({
                    color: 'rgba (255,255,255,0.1)'
                });
                viewer.scene.primitives.add(tilesetClassify);

                viewer.zoomTo(tileset);
            }
            else {
                viewer.scene.primitives.remove(tileset);
            }
        }
        const threedtiles = document.getElementById('tiles3d');
        threedtiles.onclick = switchLayer3;

        const btnCoord = document.getElementById('coordinate');
        btnCoord.onclick = axToolCoordinate;
        const btnDist = document.getElementById('distance');
        btnDist.onclick = axToolDistance;
        const btnArea = document.getElementById('area');
        btnArea.onclick = axToolArea;
        const btnClearMersure = document.getElementById('clearMersure');
        btnClearMersure.onclick = destroy;

        const btnIdentity = document.getElementById('identify');//属性查询
        btnIdentity.onclick = axToolIdentity;
        const btnClearSelection = document.getElementById('clearSelection');
        btnClearSelection.onclick = clearMap;
        const btnfloorAndRoom = document.getElementById('floorAndRoom');
        btnfloorAndRoom.onclick = axToolFloorAndRoom;

        const btnViewshed = document.getElementById('Viewshed');//视域分析
        btnViewshed.onclick = axToolViewshed;
        const btnViewshedClear = document.getElementById('ViewshedClear');//清除视域分析
        btnViewshedClear.onclick = removeViewshed;

        const btnHeatMap = document.getElementById('Heatmap');//热力图
        btnHeatMap.onclick = axToolAddHeatMap;

        const btnVideo = document.getElementById('video');//视频监控
        btnVideo.onclick = axToolVideoMonitor;
            //构造点
        function generatePoint(positions) {
            let entity = viewer.entities.add({
                position: positions[0],
                name: 'gen_point',
                point: {
                    pixelSize: 10,
                    color: Cesium.Color.RED
                }
            })
        }
        // 绘制线
        function generatePolyline(positions) {
            const isExit = viewer.entities.getById('Flection')
            isExit &&  viewer.entities.remove(isExit)
            let entity = viewer.entities.add({
                id: 'Flection',
                polyline: {
                    positions: positions,
                    width: 2,
                    clampToGround: true,//贴地画线
                    material: new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.YELLOW
                    }),
                    depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.YELLOW
                    })
                }
            })
        }

            //添加绘制结果
        function addDrawResult(positions, drawType) {
            switch (drawType) {
                case 'Point':
                    generatePoint(positions);
                    break;
            }
        }
        draw = new EntityDraw(viewer);
        // console.log(draw)
        function cartesian3ToCoordinates(position) {
            const c = Cesium.Cartographic.fromCartesian(position);
            return {
                x: Cesium.Math.toDegrees(c.longitude),
                y: Cesium.Math.toDegrees(c.latitude)
            };
        }
        // 计算方位
        function getBearing (point1, point2, point3) {
            const line = turf.lineString([[point1.x, point1.y], [point2.x, point2.y], [point3.x, point3.y], [point1.x, point1.y]])
            /**
            * 逆时针 false 右侧
            * 顺时针 true 左侧
            */
            const dir = turf.booleanClockwise(line)
            return dir
        }
        //  注册绘制结束事件 在结束事件中获取绘制结果 可以将结果保存到数据库中
        draw.DrawEndEvent.addEventListener((result, positions, drawType) => {
            result.remove();
            // console.log(positions)
            addDrawResult(positions, drawType);
            if (drawType === 'Point') {
                // 笛卡尔坐标转换
                const formatWgs84 = positions.map(item => {
                    return cartesian3ToCoordinates(item)
                })
                drawOriginPoints.push(positions[0])
                drawPoints.push(formatWgs84[0])
                generatePolyline(drawOriginPoints)
                if (drawPoints.length >= 3) {
                    console.log(drawPoints.length - 3, drawPoints.length - 2)
                    console.log(drawPoints.length - 1)
                    let num = getBearing(drawPoints[drawPoints.length - 3], drawPoints[drawPoints.length - 2], drawPoints[drawPoints.length - 1])
                    console.log(num)
                    if (!num) {
                        alert('左')
                    } else {
                        alert('右')
                    }
                }
            }
        });
        // 新增拐点
        const btnFlectionPoint = document.getElementById('HnflectionPoint')
        btnFlectionPoint.onclick = function () {
            draw.activate('Point');
        }
        // 删除拐点
        const btnClearflectionPoint = document.getElementById('ClearflectionPoint')
        btnClearflectionPoint.onclick = function () {
            console.log('clear')
            drawOriginPoints = []
            drawPoints = []
            let values = [].concat(viewer.entities.values)
            const isExit = viewer.entities.getById('Flection')
            isExit &&  viewer.entities.remove(isExit)
            values.forEach(item => {
                if (item.name && item.name.includes('gen_point')) {
                    viewer.entities.remove(item)
                }
            });
        }
    </script>